{% extends 'base.html' %}
{% block title %}
    <title>用户列表</title>
{% endblock %}

{% block crumb %}
    <a class="maincolor" href="#">系统功能</a>
    <span class="c-666 en">&gt;</span>
    <a class="maincolor" href="/list_user">用户管理</a>
{% endblock crumb %}

{% block content %}
<article class="cl pd-20">
    <form class="form form-horizontal" id="form-userlist" method="get">
        <!-- 如果有表单 -->
        {# {{ form.csrf_token }} #}
        <!-- 如果没有表单 -->
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

        <legend class="">用户列表</legend>
        <a class="btn btn-primary-outline radius f-r size-MINI mr-20 mt-5 va-m" href="{{ url_for('user.new_user') }}">添加</a>
        <a class="btn btn-primary-outline radius f-r size-MINI mr-20 mt-5 va-b" href="{{ url_for('user.new_user') }}">搜索</a>
        <div class="mt-10 mb-10">
            <div class="mt-5 mb-5 f-l">
                <label class="form-label ml-10 f-l">按用户账号</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input type="text" class="input-text" id="username" name="username" autocomplete="off" placeholder="用户帐号">
                </div>
            </div>
            <div class="mt-5 mb-5 f-l">
                <label class="form-label f-l">按角色</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input type="text" class="input-text" id="password" name="password" autocomplete="off" placeholder="用户角色">
                </div>
            </div>
        </div>
        <div class="panel panel-default mt-10">
            {% if users %}
            <table class="table table-border table-bg table-bordered table-hover">
                <thead class="text-c">
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>账号</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>激活状态</th>
                        <th>确认状态</th>
                        <th>注册时间</th>
                        <th>登录时间</th>
                        <th>离开时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                {% for user in users %}
                    <tr>
                        <td>{{ loop.index + ((pagination.page - 1) * pagination.per_page) }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.role.name }}</td>
                        <td>{{ user.active }}</td>
                        <td>{{ user.confirmed }}</td>
                        <td>{{ user.member_since }}</td>
                        <td>{{ user.login_date }}</td>
                        <td>{{ user.last_date }}</td>
                        <td>
                            <div class="cl">
                                <a class="btn btn-default size-MINI radius f-l" href="{{ url_for('user.edit_user', user_id=user.id) }}">编辑</a>
                                <form class="inline f-l" method="post" action="{{ url_for('user.delete_user', user_id=user.id, next=request.full_path) }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="btn btn-danger-outline size-MINI" onclick="return confirm('确认删除？');">删除</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
                <tfoot class="text-c">
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>账号</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>激活状态</th>
                        <th>确认状态</th>
                        <th>注册时间</th>
                        <th>登录时间</th>
                        <th>离开时间</th>
                        <th>操作</th>
                    </tr>
                </tfoot>
            </table>
            {% else %}
            <div class="tip"><h5>没有数据</h5></div>
            {% endif %}
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                      <div id="layui_pager"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</article>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;

laypage.render({
      elem: 'layui_pager'
      ,count: 100
      ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
      ,jump: function(obj){
        console.log(obj)
      }
    });
});
</script>
{% endblock content %}
